<template>
	<view class="container">
		<view class="box">


			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input :adjust-position="false" type="text" placeholder="请输入" confirm-type="search"
						v-model="kwd"></input>
					<button class="cu-btn search-btn shadow-blur round" @click="onSearch">搜索</button>

				</view>
			</view>

<!--      <view class="navbar">-->
<!--        <view v-for="(item, index) in navList" :key="index" class="nav-item"-->
<!--              :class="{current: tabCurrentIndex === index}" @click="tabClick(index)">-->
<!--          {{item.text}}-->
<!--        </view>-->
<!--      </view>-->
		</view>
		<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
			<!-- 空白页 -->
			<empty v-if="loaded === true && worksList.length === 0"></empty>

			<!-- 招聘列表 -->
			<view v-for="(item,index) in worksList" :key="index"
				class="item padding-xl boxbox bg-grey123 radius shadow shadow-lg bg-white margin-top">
				<view class="flex">
					<view class="title flex-treble padding-top-sm text-cut  radius">{{item.name+' '+item.mobile}}</view>
              <view class="flex-sub flex" style="font-size:20px;text-align: end;line-height: 30px">
                <span class="flex-sub cuIcon-phone" @click="callTel(item.mobile)"></span>
<!--                <span class="flex-sub cuIcon-edit" @click="edit(item)"></span>-->
              </view>
				</view>
				<view class="flex  p-xs mb-sm123  margin-bottom-sm mb-sm">
					<view class="flex-twice  margin-xs123  padding-tb-sm margin-xs radius detail">
            <view>期望岗位类型：{{item.position_name}}</view>
					</view>
				</view>


			</view>

			<uni-load-more :status="loadingType"></uni-load-more>

		</scroll-view>

	</view>



</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {

				loaded: false,
				isMP: false,
				loadingType: 'more',
				userState: 1,
				titleNViewBackground: '#FFF',
				area_id: '',
				wage_big: '',
				kwd: '',
				page: 1,
				wage_small: '',
				position_type: '',
				work_type: '',
				statusType: '',
        editData: [],
        modalName: '',
				typeState: {},
				firstPage: '',
				worksList: [],
        userInfo: []
			};
		},

		onLoad() {
			this.loaded = true;
      this.userInfo = uni.getStorageSync('userInfo');
      // this.getTableState();
			console.log('onload')
		},
		onShow() {
			let t = this;
			this.worksList = [];
			this.page = 1;
			this.loadData();
		},
		methods: {
		  hideModal(){
        this.modalName = ''
      },
      async doEdit(id){
        let t = this;
        if(t.statusIndex==0){
          uni.showToast({
            title:'请选择处理意见',
            icon:'none',
          })
          return
        }
        let param = {
          'id':id,
          'handle_mobile':t.userInfo.mobile,
          'status':t.statusIds[t.statusIndex],
        };

        let data = await this.$http.post(
          'wx/apply_update', //可以直接放链接(将不启用全局定义域名)
          param,
        );

        t.hideModal()
        t.onSearch()
      },
      changeStatus(e){
        this.statusIndex = e.detail.value
      },
      edit(item){
        this.statusIndex = 0
        this.editData = item
        this.modalName = 'editModal'
      },
      callTel(phone){
        uni.makePhoneCall({
          phoneNumber:  phone
        });
      },
			Bind() {
				console.log('in Bind')
				this.onSearch();
			},
			async getTableState() {
				let param = 'jobs';
				let t = this;
				let data = await this.$http.get(
					'wx/common_get_table_status/' + param, //可以直接放链接(将不启用全局定义域名)
				);
				// t.provinceData=[''];
				// t.citysData = ['请选择']var arr = []
				t.typeState = data
				uni.setStorageSync('jobState', data);
				let obj = data.type

				console.log(data);
			},
			onSearch() {
				this.page = 1;
				this.worksList = []
				this.loadData();
			},
			statusChange(e) {
				let i = e.detail.value
				this.statusType = this.statusArr[i]
				this.page = 1;
				this.statusIndex = i;
				this.worksList = [];
				this.loadData();
			},
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData() {
				let t = this

				t.loadingType = 'loading';

				// let uId = uni.getStorageSync('userId');
				// console.log(uId)
				// let uId =1;
				let uId = uni.getStorageSync('userId');
				if (uId > "0" && uId != undefined) {
					// if (this.tabCurrentIndex == 1) {
					// 	this.worksList = []
					// 	this.loadingType = 'more';
					// 	return
					// }
					let search = {
						order_by: 'created_at,desc',
						// seeker_id: uId,
            agent_mobile: t.userInfo.mobile,
						title: t.kwd,
						wx_name:this.$wx_name,
					}


					console.log(JSON.stringify(search))
					let param = {
						search_data: JSON.stringify(search),
						page: t.page,
						per_page: 10,
					};
					let data = await this.$http.get(
						'wx/all_list', //可以直接放链接(将不启用全局定义域名)
						param,
					);
					// this.worksList = data
					if (data != undefined && data.length > 0) {
						this.worksList = this.worksList.concat(data)
						this.page++
					}

					console.log(this.worksList)
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.loaded = true;

					//判断是否还有数据， 有改为 more， 没有改为noMore
					this.loadingType = 'more';
					return
				}

				t.$refs.goReg.showModal('regModal');
				return;




			},
			//推荐人才
			pushPerson() {
				this.$refs.pushPerson.toggleMask();
			},
			//推荐人才
			pushPosition() {
				this.$refs.pushPosition.toggleMask();
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/tabbar/tabbar-2/jobInfo?id=${id}`
					// url: `/pages/tabbar/tabbar-1/trainInfo`
				})
			},

			//详情页
			navToDetailPage(item) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				// uni.showToast({
				// 	title: `功能开发中...`,
				// 	icon: 'none'
				// })
				// return
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/works/detail?id=${id}`
				})
			},
			personDetailPage(item) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				let id = item.title;
				uni.navigateTo({
					url: `/pages/person/detail?id=${id}`
				})
			},
			//顶部tab点击
			tabClick(index) {
				// if(index){
				// 	uni.showToast({
				// 		title: `功能开发中...`,
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.tabCurrentIndex = index;
				console.log(index)

				this.typeId = this.navList[index].value;

				this.page = 1;
				this.worksList = [];
				this.loadData('refush');
			},
			cateChange(e) {
				let index = e.detail.value
				this.cateIndex = index;
				let cateId = this.cateIds[index];

				console.log(cateId)
				this.cateId = cateId > 0 ? cateId : 0;
				this.page = 1;
				this.tableList = [];
				this.loadData('refush');
			},
			//更换tabbar
			changeTabbar(state) {
				let tabList = Json.tabList;
				uni.setStorageSync('userState', state);

				let tabBar = tabList[state];
				console.log(tabBar)
				let index = 0;
				tabBar.forEach(item => {
					uni.setTabBarItem({
						index: index,
						text: item.text,
						iconPath: item.iconPath,
						pagePath: item.pagePath,
						selectedIconPath: item.selectedIconPath,
						success: (res) => {
							console.log(res)
						},
						complete: (e) => {
							console.log(e)
						},
					})
					index++;
				})
				uni.setStorageSync('tabState', 0);

			},
		},

	}
</script>

<style lang="scss">
	/* #ifdef MP */
	.mp-search-box {
		position: absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;

		.ser-input {
			flex: 1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color: $font-color-base;
			border-radius: 20px;
			background: rgba(255, 255, 255, .6);
		}
	}

	page {}

  .menu{
    .cu-item{
      border-bottom: 1px solid #ddd;
    }
  }
	/* #endif */
	.cu-bar {
		min-height: 44px;

		.search-form {
			height: 65rpx;
			margin-right: 0;
			// margin-right: 0;
		}
	}

	.container {
		padding-top: 96px;

		.box {
			position: fixed !important;
			top: 0px;
			width: 100%;
			box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		}
	}

	.search-btn {
		background-color: #4CA5FE !important;
		color: #FFF;
		height: 65rpx;
	}

	.cate-btn {
		background-color: #4CA5FE !important;
		color: #FFF;
		margin: 0 10px;

		image {
			width: 16px;
			height: 16px;
		}
	}

	.navbar {
		display: flex;
		height: 44px;
		padding: 0 5px;
		background: #fff;
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			text-align: center;
			border-left: 0px;
			border-right: 0px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: #4CA5FE;
			}
		}

	}

	.bg-grey123 {
		border-radius: 20px;
	}

	.mb-sm123 {
		display: flex;
		border-bottom: 2px #5d9dd3 solid;
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
	}

	.cu-btns {
		margin: 0px 8px;
	}

	.cu-btnss {
		margin-right: -11px;
	}

	.boxbox {

		padding: 0px 0px;
		margin: 26px 10px;
	}

	.margin-xs123 {
		display: flex;
		margin: 0;
	}

	.margin-lr {}

	.container {
		padding-top: 45px;
	}

	.flex-wrap {
		color: #222 !important;
	}

	.person {
		.basis-xs {
			flex-basis: 50%;
			padding: 10px 0;
		}
	}

	.basis-xs {
		flex-basis: 50%;
		padding: 10px 0;
	}

	.basis-xs20 {
		flex-basis: 20%;
	}

	.basis-row {
		flex-basis: 100%;
	}

	.search-btn {
		background-color: #4CA5FE !important;
		color: #FFF;
		width: 80px;
	}

	.flex {
		margin: 0 15px;
		color: #BAC2D2;
		font-size: 12px;
	}

	.flex-2 {
		flex: 2
	}

	.box {
		position: fixed;
		top: 0px;
		left: 0;
		z-index: 990;
		width: 100%;
	}

	.list-scroll-content {
		margin-top: 5px;
		height: 600px;

		.item {
			heigth: 150px !important;
		}

		.title {
			font-size: 16px;
			color: #222222;
			font-weight: bold;
		}

		.reward {
			font-size: 20px;
			// color:#FF4400;
			// font-weight: bold;
			top: 5px;
			right: 5px;
			text-align: right;
		}

		.detail {
			font-size: 12px;
			color: #BAC2D2;
			// height:50px;
		}
	}

	.top0 {
		top: 0;
	}

	page {
		background: #f5f5f5;
	}

	.m-t {
		margin-top: 16upx;
	}


	.position {
		color: #222;
		font-size: 16px;
		margin: 0 !important;
		font-weight: bold;
		justify-content: space-between;
	}

	.item>.flex .subText {
		margin: 0 10px;
		height: 50px;
		border-bottom: 1px solid #4CA5FE;

	}

	.portrait-box {
		position: absolute;
		right: 20px;
	}

	.portrait {
		width: 130upx;
		height: 130upx;
		border: 5upx solid #fff;
		border-radius: 50%;
	}

	.flex {
		margin: 0 10px;
		color: #222;
	}

	.reward {
		// color: #FF4400;
		font-size: 18px;
		position: relative;
		min-width: 100px
	}

	.action-btn {
		height: 50px;
		padding: 5px 0;
	}

	.line {
		margin-top: 5px;
		border-top: 1px solid #4CA5FE;
	}

	.cu-avatar {
		width: 50upx;
		height: 50upx;
	}

	.company {
		font-size: 16px;
		height: 40px;
		line-height: 40px;
	}

	.height-14 {
		line-height: 14px;
	}

	.action-box {
		text-align: right;
	}

	.join-btn {
		width: 90px;
		font-size: 14px;
		height: 30px;
		border-radius: 17px;
		position: absolute;
		margin: 5px 0px;
		right: 25px;
		background-color: #0181ff;
	}

	.font14 {
		color: #BAC2D2;
		font-size: 14px;
		font-weight: normal;
	}
</style>
